<script setup lang="ts">
import pc1 from '~/assets/imgs/depositarios/banner.png';
import mp1 from '~/assets/imgs/depositarios/banner-mp.png';
import Rules from '~/assets/imgs/depositarios/rule.png';
import RulesMP from '~/assets/imgs/depositarios/rule-mp.png';
import { formatNumber } from '~/utils';

const bp = useAppBreakpoints();
const appStore = useAppStore();
const authed = useAuthed();
const historyQuery = useQuery({
  queryKey: [apis.apiDepositCommissionRecord.id],
  queryFn: () => apis.apiDepositCommissionRecord({ page_size: 4 }),
});
const statisticsQuery = useQuery({
  queryKey: [apis.apiInviteStatistics.id],
  queryFn: () => apis.apiInviteStatistics(undefined),
});
const DCQuery = useQuery({
  queryKey: [apis.apiActivityDepositCommissions.id],
  queryFn: () => apis.apiActivityDepositCommissions(undefined),
});

const list = computed(() => historyQuery.data.value?.list ?? []);
const details = computed(() => statisticsQuery.data.value?.referral_user_balance?.deposit_commission_rewards ?? undefined);
const DCDetail = computed(() => DCQuery.data.value ?? undefined);
function openInviteClaimFn() {
  if (!details.value?.balance)
    return;

  globalPopups.claim.open({
    currency: details?.value.balance_details,
    amount: Number(details.value?.balance),
    claimType: 13,
  }, { footer: null });
}
</script>

<template>
  <div class="page-content-w">
    <div class="swiper-slide mb-15 lt-tabletl:mb-3">
      <div class="swiper-slide__item">
        <img v-if="bp.tabletl" :src="pc1">
        <img v-else :src="mp1">
        <div class="swiper-slide__item-content">
          <I18nT v-if="bp.tabletl" keypath="Qc6WnNxHx6yWZytNKgk1" tag="div" class="title">
            <template #ratio>
              <span class="text-yellow"> {{ ((DCDetail?.parent_commissions_rate ?? 0) + (DCDetail?.root_commissions_rate ?? 0)) * 100 }}%</span>
            </template>
          </I18nT>
          <I18nT v-else keypath="Qc6WnNxHx6yWZytNKgkQ" tag="div" class="title">
            <template #ratio>
              <span class="text-yellow"> {{ ((DCDetail?.parent_commissions_rate ?? 0) + (DCDetail?.root_commissions_rate ?? 0)) * 100 }}%</span>
            </template>
          </I18nT>
          <AButton
            class="ant-cover__Button-3d-primary btn mt-5 lt-tablet:(my-1.1)" type="primary"
            @click="authed ? globalPopups.invitedBrokerageShare.open() : globalPopups.sign.open()"
          >
            {{ $t('ruix7Lrm4wvh9gM_4_4S') }}
          </AButton>
        </div>
      </div>
    </div>

    <div class="grid grid-cols-[350px_auto] gap-5 lt-tabletl:(grid-cols-[1fr] gap-3)">
      <TCard :title="$t('cByJc3CuZd_9YJyxxCan0')">
        <template #action>
          <span class="url-yellow-underline" @click="globalPopups.inviteBonus.open()">{{ $t('bxDkh4G4OcsDvzFnvPfG') }}</span>
        </template>
        <div class="h-[100%] flex flex-col">
          <div class="flex flex-col items-center gap-3">
            <p class="text-sys-text-body">
              {{ $t('rtezwaGoSBiu36b638rg') }}
            </p>
            <TAmount :value="details?.balance" iconPos="left" symbol="$" format="max-dec" :decimals="4" class="text-white" />
            <AButton
              v-if="Number(details?.balance ?? 0)"
              class="ant-cover__Button-3d-primary !px-7.5"
              type="primary"
              @click="openInviteClaimFn"
            >
              {{ $t('sx5fQf4CaYkEuTPtBdzg') }}
            </AButton>
            <AButton
              v-else
              class="ant-cover__Button-3d-primary !px-7.5"
              type="primary"
              @click="authed ? globalPopups.invitedBrokerageShare.open() : globalPopups.sign.open()"
            >
              {{ $t('ruix7Lrm4wvh9gM_4_4S') }}
            </AButton>
          </div>

          <div class="divider-h-gradual" />
          <div class="mb-4 text-center">
            <div class="mb-2 text-sys-text-body">
              {{ $t('eEYhL4G_87U_1FkZCj7Ih') }}
            </div>
            <div class="flex items-center justify-center">
              <i class="i-local:lock-fill mr-2 text-6" />
              <span class="text-4.5">
                ${{ bignumber(formatNumber(details?.locked_balance || 0, 2)).toFormat() }}
              </span>
            </div>
          </div>
          <div class="flex flex-1 flex-col gap-4" :class="{ 'justify-between': list.length >= 6 }">
            <div v-for="i in list" :key="i.log_id" class="flex-between">
              <div class="flex-start gap-1.5 text-sm">
                <img :src="appStore.getCdnResPath('avatar', (i?.from_user?.avatar ?? 1))" class="h-5.5 w-5.5 rounded-1/2">
                <span>{{ desensitize(i?.from_user?.nickname, 3) }}</span>
                <span class="text-sys-text-body">{{ $d(i.create_time) }}</span>
              </div>
              <TAmount :value="i.amount" :symbol="i.currency" iconPos="left" format="max-dec" :decimals="4" />
            </div>
            <TEmpty v-if="list.length === 0" class="mt-15 h-20" />
          </div>
        </div>
      </TCard>
      <TCard class="illustrate" :title="$t('gc1Vo7X7JaIqZs0fU1zfw')">
        <div class="mt-2 text-base text-sys-text-body font-normal font-normal leading-normal">
          <p>{{ $t('4sB4jWuNvUcMyYjVHao2n', { rate: (DCDetail?.parent_commissions_rate ?? 0) * 100 }) }} </p>
          <p>{{ $t('cQQOnGerW7XvNvS2Ggf', { rate: (DCDetail?.root_commissions_rate ?? 0) * 100 }) }}</p>
          <p>{{ $t('qQhJmOzv9S4KcsPdPnP0') }}</p>
        </div>
        <div class="mt-5 text-center">
          <img v-if="bp.tabletl" :src="Rules" class="w-[542px] object-cover">
          <img v-else :src="RulesMP" class="w-full object-cover text-center">
        </div>
      </TCard>
    </div>
  </div>
</template>

<style scoped lang="scss">
@use '../index/components/banner/style.scss';
</style>
